/**
 * @namespace Demo.view.Counter
 * @author burning <www.cafeinit.com>
 * @version 2018.12.12
 */

import React, { PureComponent } from 'react'
import Counter from '../../../components/Counter'
import { connect } from 'dva'
 
class ConterDemo extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      counters: [0, 1, 3],
      total: 0
    }
  }

  componentDidMount() {
    // ...
  }

  handleCounterOnChange = (index, val) => {
    // console.log('handleCounterOnChange', index, val)
    const { counters } = this.state
    counters[index] = val
    let total = 0
    counters.map(item => (total += item))
    this.setState({ counters, total })
  }

  render() {
    const { counters, total } = this.state

    return (
      <div className="page-demo">
        <h1 className="page-title">Counter</h1>
        <strong>Total: {total}</strong>
        <Counter initValue={counters[0]} step={1} onChange={(val) => { this.handleCounterOnChange(0, val) }} />
        <Counter initValue={counters[1]} step={2} onChange={(val) => { this.handleCounterOnChange(1, val) }} />
        <Counter initValue={counters[2]} step={10} onChange={(val) => { this.handleCounterOnChange(2, val) }} />
      </div>
    )
  }
}

export default connect()(ConterDemo)
